<template>
  <div>
    <div class="container">
      <div id="d1"></div>
      <div id="d2"></div>
      <div id="d3"></div>
      <div id="d4"></div>
    </div>
  </div>
</template>
<script>
require("../assets/shine");
import * as echarts from "echarts";
export default {
  mounted() {
    // 折线图
    var chart1 = echarts.init(document.getElementById("d1"), "dark");
    chart1.setOption({
      color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
      title: {
        text: "周销量",
        subtext: "",
        color: "#fff",
        x: "center",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          // name: "Line 1",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(128, 255, 165)",
              },
              {
                offset: 1,
                color: "rgb(1, 191, 236)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [140, 232, 101, 264, 90, 340, 250],
        },
        {
          // name: "Line 2",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(0, 221, 255)",
              },
              {
                offset: 1,
                color: "rgb(77, 119, 255)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [120, 282, 111, 234, 220, 340, 310],
        },
        {
          // name: "Line 3",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(55, 162, 255)",
              },
              {
                offset: 1,
                color: "rgb(116, 21, 219)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [320, 132, 201, 334, 190, 130, 220],
        },
        {
          // name: "Line 4",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(255, 0, 135)",
              },
              {
                offset: 1,
                color: "rgb(135, 0, 157)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [220, 402, 231, 134, 190, 230, 120],
        },
        {
          // name: "Line 5",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          label: {
            show: true,
            position: "top",
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(255, 191, 0)",
              },
              {
                offset: 1,
                color: "rgb(224, 62, 76)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [220, 302, 181, 234, 210, 290, 150],
        },
      ],
    });
    //地图
    var chart2 = echarts.init(document.getElementById("d2"), "dark");
    chart2.setOption({
      title: {
        text: "用户分布",
        x: "center",
      },
      //是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
      visualMap: {
        // 左下角定义 在选中范围中的视觉元素 渐变地区颜色
        type: "piecewise", // 类型为分段型
        top: "bottom",
        // calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
        right: 10,
        splitNumber: 6,
        seriesIndex: [0],
        itemWidth: 20, // 每个图元的宽度
        itemGap: 2, // 每两个图元之间的间隔距离，单位为px
        pieces: [
          // 自定义每一段的范围，以及每一段的文字
          { gte: 10000, label: "10000人以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
          {
            gte: 1000,
            lte: 9999,
            label: "1000-9999人",
          },
          {
            gte: 500,
            lte: 999,
            label: "500-999人",
          },
          {
            gte: 100,
            lte: 499,
            label: "100-499人",
          },
          {
            gte: 1,
            lte: 99,
            label: "1-99人",
          },
          { lte: 0, label: "无" }, // 不指定 min，表示 min 为无限大（-Infinity）。
        ],
      },
      // 提示框，鼠标移入
      tooltip: {
        show: true, //鼠标移入是否触发数据
        trigger: "item", //出发方式
        formatter: "{b}-用户数量：{c}",
      },
      //配置地图的数据，并且显示
      series: [
        {
          name: "地图",
          type: "map", //地图种类
          map: "china", //地图类型。
          data: [
            {
              name: "北京",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "天津",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "上海",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "重庆",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "河北",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "河南",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "云南",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "辽宁",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "黑龙江",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "湖南",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "安徽",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "山东",
              value: Math.round(Math.random() * 5000),
            },
            {
              name: "新疆",
              value: Math.round(Math.random() * 0),
            },
            {
              name: "江苏",
              value: Math.round(Math.random() * 5000),
            },
            {
              name: "浙江",
              value: Math.round(Math.random() * 50000),
            },
            {
              name: "江西",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "湖北",
              value: Math.round(Math.random() * 5000),
            },
            {
              name: "广西",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "甘肃",
              value: Math.round(Math.random() * 0),
            },
            {
              name: "山西",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "内蒙古",
              value: Math.round(Math.random() * 0),
            },
            {
              name: "陕西",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "吉林",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "福建",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "贵州",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "广东",
              value: Math.round(Math.random() * 500000),
            },
            {
              name: "青海",
              value: Math.round(Math.random() * 0),
            },
            {
              name: "西藏",
              value: Math.round(Math.random() * 0),
            },
            {
              name: "四川",
              value: Math.round(Math.random() * 5000),
            },
            {
              name: "宁夏",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "海南",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "台湾",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "香港",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "澳门",
              value: Math.round(Math.random() * 500),
            },
            {
              name: "南海诸岛",
              value: Math.round(Math.random() * 500),
            },
          ],
          itemStyle: {
            normal: {
              label: {
                show: true, //默认是否显示省份名称
              },
              borderWidth: 1,
            },
            //地图区域的多边形 图形样式。
            emphasis: {
              label: {
                show: true, //选中状态是否显示省份名称
              },
            },
          },
          zoom: 1, //放大比例
          label: {
            //图形上的文本标签，可用于说明图形的一些数据信息
            show: true,
          },
        },
        {
          type: "scatter",
          showEffectOn: "render", //配置什么时候显示特效
          coordinateSystem: "geo", //该系列使用的坐标系
          symbolSize: 10, //标记的大小
          data: [{ name: "宜昌", value: [111.3, 30.7, 130] }],
          zlevel: 99999,
        },
      ],
    }),
      window.addEventListener("resize", () => {
        // 自动渲染echarts
        mapChart.resize();
      });
    //柱状图
    var chart3 = echarts.init(document.getElementById("d3"), "dark");
    chart3.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // Use axis to trigger tooltip
          type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
      },
      yAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      series: [
        {
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [320, 302, 301, 334, 390, 330, 320],
        },
        {
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [150, 212, 201, 154, 190, 330, 410],
        },
        {
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [820, 832, 901, 934, 1290, 1330, 1320],
        },
      ],
    });
    // 旭日图
    const colors = ["#FFAE57", "#FF7853", "#EA5151", "#CC3F57", "#9A2555"];
    const bgColor = "#2E2733";
    const itemStyle = {
      star5: {
        color: colors[0],
      },
      star4: {
        color: colors[1],
      },
      star3: {
        color: colors[2],
      },
      star2: {
        color: colors[3],
      },
    };
    const data = [
      {
        name: "国内",
        itemStyle: {
          color: colors[1],
        },
        children: [
          {
            name: "省外",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "重庆",
                  },
                  {
                    name: "西藏",
                  },
                  {
                    name: "贵州",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "甘肃",
                  },
                  {
                    name: "武汉",
                  },
                  {
                    name: "新疆",
                  },
                ],
              },
              {
                name: "3☆",
                children: [
                  {
                    name: "北京",
                  },
                ],
              },
            ],
          },
          {
            name: "省内",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "阿坝藏族羌族自治州",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "甘孜藏族自治州",
                  },
                  {
                    name: "乐山",
                  },
                ],
              },
              {
                name: "3☆",
                children: [
                  {
                    name: "凉山彝族自治州",
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        name: "国外",
        itemStyle: {
          color: colors[2],
        },
        children: [
          {
            name: "欧洲",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "法国",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "瑞士",
                  },
                  {
                    name: "意大利",
                  },
                ],
              },
              {
                name: "3☆",
                children: [
                  {
                    name: "德国",
                  },
                ],
              },
            ],
          },
          {
            name: "亚洲",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "泰国",
                  },
                  {
                    name: "韩国",
                  },
                  {
                    name: "日本",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "新加坡",
                  },
                  {
                    name: "印度尼西亚",
                  },
                  {
                    name: "巴基斯坦",
                  },
                  {
                    name: "马来西亚",
                  },
                ],
              },
              {
                name: "3☆",
                children: [
                  {
                    name: "越南",
                  },
                ],
              },
            ],
          },
          {
            name: "北美洲",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "美国",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "加拿大",
                  },
                ],
              },
              {
                name: "3☆",
                children: [
                  {
                    name: "墨西哥",
                  },
                ],
              },
            ],
          },
          {
            name: "非洲",
            children: [
              {
                name: "3☆",
                children: [
                  {
                    name: "埃及",
                  },
                  {
                    name: "利比亚",
                  },
                  {
                    name: "摩洛哥",
                  },
                ],
              },
            ],
          },
          {
            name: "大洋洲",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "澳大利亚",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "新西兰",
                  },
                ],
              },
            ],
          },
        ],
      },
    ];
    for (let j = 0; j < data.length; ++j) {
      let level1 = data[j].children;
      for (let i = 0; i < level1.length; ++i) {
        let block = level1[i].children;
        let bookScore = [];
        let bookScoreId;
        for (let star = 0; star < block.length; ++star) {
          let style = (function (name) {
            switch (name) {
              case "5☆":
                bookScoreId = 0;
                return itemStyle.star5;
              case "4☆":
                bookScoreId = 1;
                return itemStyle.star4;
              case "3☆":
                bookScoreId = 2;
                return itemStyle.star3;
              case "2☆":
                bookScoreId = 3;
                return itemStyle.star2;
            }
          })(block[star].name);
          block[star].label = {
            color: style.color,
            downplay: {
              opacity: 0.5,
            },
          };
          if (block[star].children) {
            style = {
              opacity: 1,
              color: style.color,
            };
            block[star].children.forEach(function (book) {
              book.value = 1;
              book.itemStyle = style;
              book.label = {
                color: style.color,
              };
              let value = 1;
              if (bookScoreId === 0 || bookScoreId === 3) {
                value = 5;
              }
              if (bookScore[bookScoreId]) {
                bookScore[bookScoreId].value += value;
              } else {
                bookScore[bookScoreId] = {
                  color: colors[bookScoreId],
                  value: value,
                };
              }
            });
          }
        }
        level1[i].itemStyle = {
          color: data[j].itemStyle.color,
        };
      }
    }
    var chart4 = echarts.init(document.getElementById("d4"), "dark");
    chart4.setOption({
      title: {
        text: "热门旅游地分布",
        subtext: "",
        x: "left",
      },
      series: [
        {
          type: "sunburst",
          center: ["50%", "48%"],
          data: data,
          sort: function (a, b) {
            if (a.depth === 1) {
              return b.getValue() - a.getValue();
            } else {
              return a.dataIndex - b.dataIndex;
            }
          },
          label: {
            rotate: "radial",
            color: bgColor,
          },
          itemStyle: {
            borderColor: bgColor,
            borderWidth: 2,
          },
          levels: [
            {},
            {
              r0: 0,
              r: 40,
              label: {
                rotate: 0,
              },
            },
            {
              r0: 40,
              r: 105,
            },
            {
              r0: 115,
              r: 140,
              itemStyle: {
                shadowBlur: 2,
                shadowColor: colors[2],
                color: "transparent",
              },
              label: {
                rotate: "tangential",
                fontSize: 10,
                color: colors[0],
              },
            },
            {
              r0: 140,
              r: 145,
              itemStyle: {
                shadowBlur: 80,
                shadowColor: colors[0],
              },
              label: {
                position: "outside",
                textShadowBlur: 5,
                textShadowColor: "#333",
              },
              downplay: {
                label: {
                  opacity: 0.5,
                },
              },
            },
          ],
        },
      ],
    });
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: rgb(51 51 51);
  position: absolute;
  top: 40px;
  left: 64px;
  display: flex;
  flex-wrap: wrap;
  > #d1 {
    width: 40%;
    height: 40%;
    margin-right: 4px;
  }
  > #d2 {
    width: 48%;
    height: 40%;
    margin-right: 4px;
  }
  > #d3 {
    width: 40%;
    height: 58%;
  }
  > #d4 {
    width: 48%;
    height: 58%;
    margin-right: 4px;
  }
}
</style>
